<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    svg {
      width: 300px;
      height: 300px;
      fill: gold;
    }

  </style>
</head>
<body>
  <!-- 之前使用字体图标 阿里巴巴矢量图标库 span class="iconfont icon-xx" 早之前的浏览器
       对svg标签支持不够友好, 随着浏览器逐渐更新,现在主流浏览器都基本支持了svg标签
       
        viewBox="0 0 128 128" 水平的偏移值 垂直的偏移值  默认的宽度和高度
        只有写了viewBox 才可以修改svg的大小
        fill属性是修改颜色
  -->
  <svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg"><path d="M108.8 44.322H89.6v-5.36c0-9.04-3.308-24.163-25.6-24.163-23.145 0-25.6 16.881-25.6 24.162v5.361H19.2v-5.36C19.2 15.281 36.798 0 64 0c27.202 0 44.8 15.281 44.8 38.961v5.361zm-32 39.356c0-5.44-5.763-9.832-12.8-9.832-7.037 0-12.8 4.392-12.8 9.832 0 3.682 2.567 6.808 6.407 8.477v11.205c0 2.718 2.875 4.962 6.4 4.962 3.524 0 6.4-2.244 6.4-4.962V92.155c3.833-1.669 6.393-4.795 6.393-8.477zM128 64v49.201c0 8.158-8.645 14.799-19.2 14.799H19.2C8.651 128 0 121.359 0 113.201V64c0-8.153 8.645-14.799 19.2-14.799h89.6c10.555 0 19.2 6.646 19.2 14.799z"/></svg>
</body>
</html>